<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sonic Typing Quirks and Coding Workshop by NaughtyTypingIncoming</title>
<style type="text/css">

body { background-color: #ffffff; }
.CI {
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
.center   {text-align: center;}
.cover    {text-align: center;}
.full     {width: 100%; }
.quarter  {width: 25%; }
.smcap    {font-variant: small-caps;}
.u        {text-decoration: underline;}
.bold     {font-weight: bold;}
</style>
</head>
<body>
<h1><a href="https://archiveofourown.org/works/27659464">Sonic Typing Quirks and Coding Workshop</a> by <a class='authorlink' href='https://archiveofourown.org/users/NaughtyTypingIncoming/pseuds/NaughtyTypingIncoming'>NaughtyTypingIncoming</a></h1>

<table class="full">

<tr><td><b>Category:</b></td><td>Sonic the Hedgehog - All Media Types</td></tr>

<tr><td><b>Genre:</b></td><td>CSS, F/M, HTML, Hypnotism, Typing Quirks (Homestuck), Weird Plot Shit, Work In Progress, code, code test, test</td></tr>

<tr><td><b>Language:</b></td><td>English</td></tr>

<tr><td><b>Status:</b></td><td>Completed</td></tr>

<tr><td><b>Published:</b></td><td>2020-11-22</td></tr>

<tr><td><b>Updated:</b></td><td>2021-02-25</td></tr>

<tr><td><b>Packaged:</b></td><td>2021-05-06 21:49:14</td></tr>

<tr><td><b>Rating:</b></td><td>Mature</td></tr>

<tr><td><b>Warnings:</b></td><td>No Archive Warnings Apply</td></tr>

<tr><td><b>Chapters:</b></td><td>2</td></tr>

<tr><td><b>Words:</b></td><td>1,357</td></tr>

<tr><td><b>Publisher:</b></td><td>archiveofourown.org</td></tr>

<tr><td><b>Story URL:</b></td><td>https://archiveofourown.org/works/27659464</td></tr>

<tr><td><b>Author URL:</b></td><td>https://archiveofourown.org/users/NaughtyTypingIncoming/pseuds/NaughtyTypingIncoming</td></tr>

<tr><td><b>Summary:</b></td><td><div class="userstuff">
              <p></p><div class="center">
  <p>Sonic, but with typing quirks and colors.</p>
  <hr/>
  <p>I've also began using this fic as a testing ground for my code.</p>
</div>
            </div></td></tr>

<tr><td><b>Relationships:</b></td><td>Fiona Fox/Scourge the Hedgehog, Miles "Tails" Prower/Rouge the Bat, Sally Acorn/Sonic the Hedgehog</td></tr>

<tr><td><b>Comments:</b></td><td>10</td></tr>

<tr><td><b>Kudos:</b></td><td>5</td></tr>

</table>

<a name="section0001"><h2>1. Chapter 1</h2></a>
<div class="story"><div class="fff_chapter_notes fff_head_notes"><b>Author's Note:</b><blockquote class="userstuff">
      <p>WHOOPS I DID NOT MEAN TO POST THIS YET!!!</p><p>Feel free to skip this until I finish it!!</p><p>Until then, watch as massive chunks of this chapter get edited and moved around.</p>
    </blockquote></div><div class="userstuff module">
    
    <p>Sonic - lower case, forgets periods, uses words in a "fast way". ex <span class="sonic">"whatchasay?"</span></p><p class="log">
	<span class="sonic">SONIC: hey gang! long time no see</span></p><p>Tails - Normal punctuation and capitals. More advanced verbiage then others.</p><p class="log">
<span class="tails">TAILS: Heyya Sonic.</span></p><p>Knuckles - ALL CAPS. NORMAL PUNCTUATION. USES &lt;&lt; AT BEGINNING OF LINES AND &gt;&gt; AT THE END</p><p class="log">
<span class="knuckles">KNUCKLES: &lt;&lt; AND WHAT ARE YOU DOING HERE? &gt;&gt;</span></p><p>Amy - Normal punctuation. EXCEPT WHEN EXCITED!! Uses excessive &lt;3's and XOXO's</p><p class="log">
<span class="amy">AMY: OH MY GOD! SONIC! &lt;3</span><br/>
<span class="sonic">SONIC: chill amy</span><br/>
<span class="amy">AMY: Alright.</span></p><p>Rouge - Uses "~" tidies instead of periods. Also capitalizes two "o's" next to one another because I'm funny.</p><p class="log">
<span class="rouge">ROUGE: Why hello Tails~ What are you up tOO~</span><br/>
<span class="tails">TAILS: Um, uhh, nothing!</span><br/>
</p><p>Shadow - no caps. very monotone. EXCEPT WHEN ANGRY!</p><p class="log">
<span class="shadow">SHADOW: hmm. stop tormenting the rabble rouge, we have a job to do.</span><br/>
<span class="rouge">ROUGE: Oh you cad~ Am I leaving you out~</span><br/>
<span class="shadow">SHADOW: no.</span></p><p>Blaze - Has a "royal" sound when trying to be formal. Normal otherwise. Get's fiery when angry (not yet implemented)</p><p class="log">
<span class="blaze">BLAZE: <span class="royal">Greetings. Welcome to my worl-</span></span></p><p>Silver - no captials except for names. Doesn't use periods (because he grew up in a hellscape future and doesn't know how to read lol. Ok, fine. He knew how to read during the Ian Flynn run because of Anotine's future diary but it FITS alright??)</p><p class="log">
<span class="silver">SILVER: wait a minute</span><br/>
<span class="silver">SILVER: *gasp* Blaze, is that you??</span><br/>
<span class="blaze">BLAZE: Oh. H-hi Silver.</span><br/>
<span class="burningblazeTEMP">BLAZE: [something angry here]</span></p><p>Sally - Has the same "formal" affect as Blaze. Standard way of talking, because she grew up in a prim and proper household. (May use southern slang w/o realizing it.)</p><p class="log">
<span class="sally">SALLY: <span class="royal">Knothole thanks you for all you have done for the kingdom.</span></span><br/>
<span class="sonic">SONIC: <span class="royal">And I thank for the kind words.</span></span><br/>
<span class="sally">SALLY: You don't have to be so rude about it.</span><br/>
<span class="sonic">SONIC: what? would you have me any other way sal?</span><br/>
</p><p>Scourge - lowercase, no punctuation. his curses have to be censored because that is what happened in the archie books and I think that is hilarious. <br/>
Fiona - Correct capitals, all punctuation.* May need to make her more unique. </p><p class="log">
	<span class="scourge">SCOURGE: come here $♥☋+</span><br/>
<span class="fiona">FIONA: Excuse me?</span><br/>
<span class="scourge">SCOURGE: you heard me ฿!+¢# +!+$</span><br/>
<span class="fiona">FIONA: Why do I put up with you?</span><br/>
<span class="scourge">SCOURGE: come on babe, you know you love my ¢*¢♔</span><br/>
<span class="fiona">FIONA: *sigh* Yeah, I do.</span><br/>
</p><p class="log">
	<span class="barby">BARBY: shrimp on the barby</span><br/>
<span class="barby">BARBY: oh THAT'S why my name is spelt like that, australia jokes are funney</span><br/>
<span class="cream">CREAM: At least you don't have an unfortunate name.</span><br/>
<span class="vanilla">VANILLA: It's a prefectly fine name dear.</span><br/>
<span class="cheese">CHEESE: CHAO CHAO</span><br/>
<span class="charmy">CHARMY: Hey! I'm here.</span><br/>
<span class="vector">VECTOR: Unfortunattly for everyone invovled, yes.</span><br/>
<span class="espio">ESPIO: We need to add Mighty and Ray for this too for a full Chaotix reunion.</span><br/>
<span class="geoffrey">GEOFFREY: HAHA! I'm pendies self-insert character.</span><br/>
<span class="hershey">HERSHEY: Uhgg! i'm almost glad that i'm not cannon anymore. i don't have to put up with your crap.</span><br/>
<span class="julie-sue">JULIE-SUE: I could do with a shorter name...</span><br/>
<span class="julie">JULIE: And would you look at that!</span><br/>
<span class="lien-da">LIEN-DA: NOT SO FAST, SISTER!</span><br/>
<span class="mina">MINA: ♩ Whoes all left? ♫</span><br/>
<span class="lupe">LUPE: Just us I think. 🐺</span><br/>
<span class="mina">MINA: ♩ Is that seriously going to be your typing quirk? ♫</span><br/>
<span class="lupe">LUPE: No. I just think he's neat. 🐺🐺🐺</span><br/>
<span class="metal">METAL: Y0U F0RG0T 4B0UT ME</span><br/>
<span class="shard">SHARD: OH IF ONLY.</span><br/>
</p><p>
  <b>Special Stuff</b>
</p><p class="log">
	<span class="nicole">NICOLE: <span class="mc">Oh master~</span></span><br/>
<span class="nicole">NICOLE: What's wrong Tails? WHATS WR0NG TA1LES?</span><br/>
<span class="tails">TAILS: They are my friends</span><br/>
<span class="tails">TAILS: <span class="bo">And that means, it's okay to fuck them!</span></span><br/>
<span class="tails">TAILS: If we ask them first!!</span><br/>
<span class="nicole">NICOLE: <span class="amy bo">I LOVE YOU <strike>SONIC</strike> TAILS!</span></span><br/>
<span class="tails">TAILS: I can tell it's still you.</span><br/>
</p><p>Test MC</p><p class="log">
	<span class="tails">TAILS: Who can I mind control?</span><br/>
<span class="amy">AMY: <span class="mc">Oh master &lt;3</span></span><br/>
<span class="barby">BARBY: <span class="mc">ooohhh master</span></span><br/>
<span class="blaze">BLAZE: <span class="mc">Oh. M-master.</span></span><br/>
<span class="cream">CREAM: <span class="mc">Oh Mr. Master.</span></span><br/>
<span class="fiona">FIONA: <strike>You little shrimp!</strike><span class="mc"> oh maaaaster. &gt;_&gt;</span></span><br/>
<span class="hersey">HERSEY: <span class="mc">Oh master.</span></span><br/>
<span class="julie-sue">JULIE-SUE: um, better not.</span><br/>
<span class="tails">TAILS: Right, Knux would be pissed.</span><br/>
<span class="knuckles">KNUCKLES: &lt;&lt; WHAT DID YOU SAY?? &gt;&gt;</span><br/>
<span class="lupe">LUPE: <span class="mc">HOOOOOOOOWWWllllll Master. *rawr* </span></span><br/>
<span class="mina">MINA: <span class="mc">♩ O-o-oh Master~ ♫</span></span><br/>
<span class="nicole">NICOLE: You saw me already.</span><br/>
<span class="tails">TAILS: Well, do it again.</span><br/>
<span class="nicole">NICOLE: *Eh-<span class="mc">hem* 00h master~~</span></span><br/>
<span class="rouge">ROUGE: <span class="mc">Oh~ baby~</span></span><br/>
<span class="tails">TAILS: Um, are you actually under mind control?</span><br/>
<span class="rouge">ROUGE: Wouldn't you like to know baby~</span><br/>
<span class="sally">SALLY: <span class="mc">Oh Master. ;)</span></span><br/>
<span class="vanilla">VANILLA: <span class="mc">Oh honey.</span></span><br/>
<span class="tails">TAILS: Wow that is a lot.</span><br/>
<span class="honey">HONEY: Someone call me?</span><br/>
<span class="vanilla">VANILLA: <span class="mc">No but I'm not complaining~</span></span><br/>
<span class="honey">HONEY: Well me~ow.</span><br/>
<span class="tangle">TANGLE: Are we even going to be in this story?</span><br/>
<span class="whisper">WHISPER: (probably not)</span><br/>
<span class="breezy">BREEZY: Damn. There's a fortune to be made on it.</span><br/>
</p>
<hr/><p class="log">
	<span class="rouge">ROUGE: Hey big boy~ wanna do the nasty?</span><br/>
<span class="tails">TAILS: The what?</span><br/>
<span class="rouge">ROUGE: You know~ the horizontal tango?</span><br/>
<span class="rouge">ROUGE: CanOOdling? The slip n and out?</span><br/>
<span class="rouge">ROUGE: The bow-chica-a-wow-w-</span><br/>
<span class="tails">TAILS: Ohhhh! You mean...</span><br/>
<span class="rouge">ROUGE: ;)</span><br/>
<span class="tails">TAILS: Sex. You are talking about sex.</span><br/>
<span class="rouge">ROUGE: Abso-fucking-lutly I am you smart little man~</span><br/>
<span class="tails">TAILS: Wha-what brought this on?</span><br/>
<span class="rouge">ROUGE: Welllll~~ You know how it is~</span><br/>
<span class="rouge">ROUGE: A girl has her needs~</span><br/>
<span class="rouge">ROUGE: Very naughty, personal needs~~</span><br/>
<span class="tails">TAILS: …Oh my god. You're just doing this to steal the new emerald I just found!</span><br/>
<span class="rouge">ROUGE: What? Oh no. No, no, no~~ Whatever gave you <i>that</i> idea?</span><br/>
<span class="tails">TAILS: Rouge, I am not stupid.</span><br/>
<span class="rouge">ROUGE: Just naïve. And a touch sweet~~</span><br/>
<span class="rouge">ROUGE: I heard on the grapevine that your cock is <b>massive</b></span><br/>
<span class="tails">TAILS: What???</span><br/>
<span class="rouge">ROUGE: Yeah! I didn't believe it as first~ But Sal has loose lips when you eat her out~</span><br/>
</p>
<hr/><p><br/>
<span class="sally mcbg">"Does this work better master?~"'</span></p>
  </div></div>
<a name="section0002"><h2>2. CSS Code</h2></a>
<div class="story"><div class="fff_chapter_notes fff_head_notes"><b>Notes for the Chapter:</b><blockquote class="userstuff"><p>My Sonic CSS workskin as of 2021/02/24</p><p>Will update in future.</p></blockquote></div><div class="userstuff module">
    
    <p>
  <code><br/>
#workskin .amy {<br/>
color: #FD95C6;<br/>
}</code>
</p><p>
  <code>#workskin .barby {<br/>
color: #ffffff;<br/>
text-shadow: -1px 0 #dc4750, 0 1px #dc4750, 1px 0 #dc4750, 0 -1px #dc4750;<br/>
}</code>
</p><p>
  <code>#workskin .blaze {<br/>
color: #8F64CD;<br/>
}</code>
</p><p>
  <code>#workskin .burningblazeTEMP {<br/>
color: #000000;<br/>
}</code>
</p><p>
  <code>#workskin .cream {<br/>
color: #FF5A00;<br/>
}</code>
</p><p>
  <code>#workskin .charmy {<br/>
color: #FF8601;<br/>
}</code>
</p><p>
  <code>#workskin .chaos {<br/>
color: #00d0f0;<br/>
}</code>
</p><p>
  <code>#workskin .espio {<br/>
color: #C9008C;<br/>
}</code>
</p><p>
  <code>#workskin .fiona {<br/>
color: #DE381B;<br/>
}</code>
</p><p>
  <code>#workskin .geoffrey {<br/>
color: #FFFFFF;<br/>
text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;<br/>
}</code>
</p><p>
  <code>#workskin .hershey {<br/>
color: #ffffff;<br/>
text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;<br/>
}</code>
</p><p>
  <code>#workskin .julie,<br/>
#workskin .julie-sue {<br/>
color: #ed98df;<br/>
}</code>
</p><p>
  <code>#workskin .knuckles,<br/>
#workskin .lien-da {<br/>
color: #FF1400;<br/>
}</code>
</p><p>
  <code>#workskin .lupe {<br/>
color: #a399f2;<br/>
}</code>
</p><p>
  <code>#workskin .mina {<br/>
color: #e0d865;<br/>
}</code>
</p><p>
  <code>#workskin .nicole {<br/>
color: #6a0dad;<br/>
}</code>
</p><p>
  <code>#workskin .rouge {<br/>
color: #FA82BA;<br/>
}</code>
</p><p>
  <code>#workskin .sally {<br/>
color: #24cef0;<br/>
}</code>
</p><p>
  <code>#workskin .scourge {<br/>
color: #2bde1b;<br/>
}</code>
</p><p>
  <code>#workskin .shadow {<br/>
color: #000000;<br/>
text-shadow: 2px 2px 3px #DC0000;<br/>
}</code>
</p><p>
  <code>#workskin .silver {<br/>
color: #E7EDE9;<br/>
text-shadow: -1px 0 #009896, 0 1px #009896, 1px 0 #009896, 0 -1px #009896;<br/>
}</code>
</p><p>
  <code>#workskin .sonic,<br/>
#workskin .metal {<br/>
color: #1A50BC;<br/>
}</code>
</p><p>
  <code>#workskin .tails {<br/>
color: #f1b000;<br/>
}</code>
</p><p>
  <code>#workskin .tikal {<br/>
color: #ffa500;<br/>
}</code>
</p><p>
  <code>#workskin .topaz {<br/>
color: #964B00;<br/>
}</code>
</p><p>
  <code>#workskin .vanilla {<br/>
color: #A77DDB;<br/>
}</code>
</p><p>
  <code>#workskin .vector {<br/>
color: #39A400;<br/>
}</code>
</p><p>
  <code>#workskin .black {<br/>
color: #000000;<br/>
}</code>
</p><p>
  <code>#workskin .bo,<br/>
#workskin .blackoutline {<br/>
text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;<br/>
}</code>
</p><p>
  <code>#workskin .mc,<br/>
#workskin .mindcontrol {<br/>
text-shadow: -1px 0 #00FF00, 0 1px #00FF00, 1px 0 #00FF00, 0 -1px #00FF00;<br/>
}</code>
</p><p>
  <code>#workskin .mcbg {<br/>
background: #00FF00;<br/>
}</code>
</p><p>
  <code>#workskin .no,<br/>
#workskin .nicole-outline {<br/>
text-shadow: -1px 0 #6a0dad, 0 1px #6a0dad, 1px 0 #6a0dad, 0 -1px #6a0dad;<br/>
}</code>
</p><p>
  <code>#workskin .royal {<br/>
font-variant: small-caps;<br/>
}</code>
</p><p>
  <code>#workskin .log {<br/>
text-align: left;<br/>
font-size: 14px;<br/>
margin-left: auto;<br/>
margin-top: 10px;<br/>
margin-bottom: 10px;<br/>
padding-left: 35px;<br/>
}</code>
</p><p>
  <code>#workskin .log .nicole,<br/>
#workskin .log .metal,<br/>
#workskin .log .shard,<br/>
#workskin .robo,<br/>
#workskin .monospace {<br/>
font-family: "Lucida Console", "Courier", "monospace";<br/>
}</code>
</p><p>
  <code>#workskin .log.shadow {<br/>
font-family: "Times New Roman", "Times", "serif";<br/>
}</code>
</p><p>
  <code>#workskin .phone {<br/>
word-break: break-word;<br/>
max-width: 300px;<br/>
font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";<br/>
display: table;<br/>
margin: auto;<br/>
}</code>
</p><p>
  <code>#workskin .header {<br/>
min-width: 300px;<br/>
background-color: #f6f6f6;<br/>
border-bottom: 1px solid #b2b2b2;<br/>
color: #000000;<br/>
font-weight: bold;<br/>
padding-bottom: .5em;<br/>
padding-top: .5em;<br/>
margin-left: -.5em;<br/>
margin-right: -.5em;<br/>
margin-bottom: -2em;<br/>
text-align: center;<br/>
text-transform: capitalize;<br/>
display: table;<br/>
}</code>
</p><p>
  <code>#workskin .messagebody {<br/>
background-color: #424242;<br/>
display: table;<br/>
padding-left: .5em;<br/>
padding-right: .5em;<br/>
border-radius: .5em;<br/>
}</code>
</p><p>
  <code>#workskin .text,<br/>
#workskin .tailstext {<br/>
float: left;<br/>
margin: 0 0 0.5em;<br/>
border-radius: 1em;<br/>
padding: 0.5em 1em;<br/>
max-width: 75%;<br/>
clear: both;<br/>
position: relative;<br/>
color: #000000;<br/>
background: #e5e5ea;<br/>
}</code>
</p><p>
  <code>#workskin .tailstext {<br/>
color: #ffffff;<br/>
background: #f1b000;<br/>
}</code>
</p><p>
  <code>#workskin .text::after,<br/>
#workskin .tailstext:after {<br/>
content: "";<br/>
position: absolute;<br/>
left: -.5em;<br/>
bottom: 0;<br/>
width: 0.5em;<br/>
height: 1em;<br/>
border-right: 0.5em solid #e5e5ea;<br/>
border-bottom-right-radius: 1em 0.5em;<br/>
}</code>
</p><p>
  <code>#workskin .tailstext:after {<br/>
border-right: 0.5em solid #f1b000;<br/>
}</code>
</p><p>
  <code>#workskin .breply,<br/>
#workskin .barbytext {<br/>
float: right;<br/>
color: #FFFFFF;<br/>
margin: 0 0 0.5em;<br/>
border-radius: 1em;<br/>
padding: 0.5em 1em;<br/>
background: #1289fe;<br/>
max-width: 75%;<br/>
clear: both;<br/>
position: relative;<br/>
}</code>
</p><p>
  <code>#workskin .barbytext {<br/>
color: #FFFFFF;<br/>
background: #dc4750;<br/>
}</code>
</p><p>
  <code>#workskin .breply::after,<br/>
#workskin .barbytext::after {<br/>
content: "";<br/>
position: absolute;<br/>
right: -0.5em;<br/>
bottom: 0;<br/>
width: 0.5em;<br/>
height: 1em;<br/>
border-bottom-left-radius: 1em 0.5em;<br/>
border-left: 0.5em solid #1289fe;<br/>
}</code>
</p><p>
  <code>#workskin .barbytext::after {<br/>
border-left: 0.5em solid #dc4750;<br/>
}</code>
</p><p>
  <code>#workskin .hide {<br/>
display: none;<br/>
}</code>
</p><p>
  <code>#workskin .time {<br/>
min-width: 295px;<br/>
color: #f7f7f7;<br/>
font-size: .75em;<br/>
padding-bottom: .5em;<br/>
padding-top: .5em;<br/>
margin-left: -.5em;<br/>
margin-right: -.5em;<br/>
margin-bottom: -.5em;<br/>
text-align: center;<br/>
display: table;<br/>
}</code>
</p><p>
  <code>#workskin .paragraph p {<br/>
line-height: 1.35;<br/>
margin: 0;<br/>
padding: 0;<br/>
text-indent: 25px;<br/>
}</code>
</p><p>
  <code>#workskin .no-indent {<br/>
text-indent: 0 !important;<br/>
}</code>
</p><p>
  <code>#workskin .img src {<br/>
max-width: 100%;<br/>
height: auto;<br/>
}</code>
</p>
  </div></div>
</body>
</html>